import React, { useState, useEffect } from 'react';
import request from "../../utils/requests";
import "./pudlic.css";
import "./prolist.css";
import { Button, Image, notification } from 'antd';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';

export default function GoodsDetails () {
    const [count, setCount] = useState(1);
    const [details, setDetails] = useState([]);
    useEffect(async () => {
        const push = location.pathname.split("/").length - 1;
        const goods_id = location.pathname.split("/")[push];
        const data = await request("/goods/details", {
            method: "POST",
            data: { goods_id },
        });
        if (data.data.success) {
            setDetails(...data.data.query.details);
        }
    }, []);
    const add_to_cart = async () => {
        const push = location.pathname.split("/").length - 1;
        const goods_id = location.pathname.split("/")[push];
        const { data } = await request("/shoppingcar/add", {
            method: "POST",
            data: { goods_id, quantity:count},
        });
        notification['success']({
            message: `${data?.message}`,
            description:
              'The world is suidernly late the mountains rivers sre slready autum.',
        });
    }
    return (
        <div>
            <div className="detCon">
                <div className="proDet wrapper">
                    <div className="proCon clearfix">
                        <div className="proImg fl">
                            <Image
                                src={"../avatars/" + details.photo1}
                                className="det"
                                width={450}
                                fallback=""
                            />
                        </div>
                        <div className="fr intro">
                            <div className="title">
                                <h4>{details.name}</h4>
                                <h5>{details.label}</h5>
                                <span>￥{details.price}</span>
                            </div>
                            <strong id='strong'>库存：<span>{details.inventory}</span></strong>
                            <div className="proIntro">
                                <div>
                                    <Button onClick={() => count < 2 ? "1" : setCount(count - 1)}>-</Button><b className="mx-5">{count}</b><Button onClick={() => setCount(count + 1)}>+</Button>
                                </div>
                            </div>
                            <div className="btns clearfix">
                                <Button type="primary" danger className="buy fl" >立即购买</Button>
                                <Button className="cart fr" onClick={add_to_cart}>加入购物车</Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}